<template>
  <Dialog v-model="dialogVisible" title="角色用户" width="800">
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="listLoading" :data="list">
        <el-table-column label="序号" type="index" width="100">
          <template #default="scope">
            {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="用户账号" prop="loginName" show-overflow-tooltip />
        <el-table-column label="用户昵称" prop="nickname" show-overflow-tooltip />
        <el-table-column label="部门" prop="deptName" show-overflow-tooltip />
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <dict-tag :options="common_enable_status" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
</template>

<script setup lang="ts">
import * as StaffApi from '@/api/system/staff'

defineOptions({ name: 'SystemRoleUserList' })

const { common_enable_status } = useIntDict(DICT_TYPE.common_enable_status)

const dialogVisible = ref(false) // dialog是否展示

const queryParams = reactive({
  roleId: undefined as any,
  pageNo: 1,
  pageSize: 10
})

const listLoading = ref(false) // 列表加载状态
const list = ref([]) // 列表数据
const total = ref(0) // 列表数据总条数

const getList = async () => {
  listLoading.value = true
  try {
    const data = await StaffApi.getStaffPage(queryParams)
    list.value = data.content
    total.value = data.totalElement
  } finally {
    listLoading.value = false
  }
}

const open = async (roleId: number) => {
  dialogVisible.value = true
  resetList()
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  queryParams.roleId = roleId
  await getList()
}
defineExpose({ open })

const resetList = () => {
  list.value = []
  total.value = 0
}
</script>

<style scoped lang="scss"></style>
